import * as echarts from '../ec-canvas/echarts';

const app = getApp();
function pieSet(chart, data) {
  var option = {
    title: {
      show: true,
      text: data + '%',
      x: 'center',
      y: 'center',
      textStyle: {
        fontSize: '15',
        color: 'black',
        fontWeight: 'normal'
      }
    },
    tooltip: {
      trigger: 'item',
      formatter: "{d}%",
      show: false
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      show: false
    },
    series:
    {
      name: '',
      type: 'pie',
      radius: ['65%', '85%'],
      avoidLabelOverlap: true,
      hoverAnimation: false,
      label: {
        normal: {
          show: false,
          position: 'center'
        },
        emphasis: {
          show: false
        }
      },
      labelLine: {
        normal: {
          show: false
        }
      },
      data: [
        { value: data, name: '' },
        { value: 100 - data, name: '' }
      ]
    }

  }
  chart.setOption(option);
  return chart;
}

function lineSet(chart, dataX, dataY) {
  var option = {
    color: ["#ED6D14"],
    grid: {
      bottom: '5%',
      right: "3%",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: dataX,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value}%",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    series: [
      {
        data: dataY,
        type: "line",
        label: {
          show: true,
          position: 'top'
        },
        areaStyle: {},
      },
    ],
  }
  chart.setOption(option);
  return chart;
}
// 只调用一次函数
function initLine(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    title: {
      text: '测试下面legend的红色区域不应被裁剪',
      left: 'center'
    },
    legend: {
      data: ['A', 'B', 'C'],
      top: 50,
      left: 'center',
      backgroundColor: 'red',
      z: 100
    },
    grid: {
      containLabel: true
    },
    tooltip: {
      show: true,
      trigger: 'axis'
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      // show: false
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
      // show: false
    },
    series: [{
      name: 'A',
      type: 'line',
      smooth: true,
      data: [18, 36, 65, 30, 78, 40, 33]
    }, {
      name: 'B',
      type: 'line',
      smooth: true,
      data: [12, 50, 51, 35, 70, 30, 20]
    }, {
      name: 'C',
      type: 'line',
      smooth: true,
      data: [10, 30, 31, 50, 40, 20, 10]
    }]
  };

  chart.setOption(option);
  return chart;
}
Page({
  data: {
    ec: {
      lazyLoad: true
    },
    line: {
      lazyLoad: false
    },
    // 如果只是渲染一次的话
    onceLine: {
      onInit: initLine
    },
    healthData: 0,
    lineDataX: [],
    lineDataY: [],
  },
  change() {
    let dataX = ['测试', '长度不够的', '值是有问题的']
    let dataY = [20, 30, 40, 10]
    this.initPieChart(60);
    this.initLineChart(dataX, dataY);
  },
  // 初始化饼图
  initPieChart(rate) {
    this.RingDom.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      pieSet(chart, rate)
      this.chart = chart;
      return chart;
    });
  },
  // 初始化折线图
  initLineChart(dataX, dataY) {
    this.LineDom.init((canvas, width, height, dpr) => {
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      canvas.setChart(chart);
      lineSet(chart, dataX, dataY)
      this.chart = chart;
      return chart;
    });
  },
  // 预警的接口 获取健康成功率
  _getRing() {
    let that = this;
    let equipId = '11053';
    that
      .axios
      .custom("Warning", "getWarning", equipId)
      .then((res) => {
        if (res.code == '200') {
          this.data.healthData = res.data.healthRate;
          let tempDataX = [];
          let tempDataY = [];
          res.data.dailyErrorLog.forEach((item) => {
            tempDataX.push(item.time);
            tempDataY.push(item.rate);
          });
          this.initPieChart(res.data.healthRate)
          this.initLineChart(tempDataX,tempDataY)
          console.log(res, "0,全部数据");
        }
        
      });
  },
  onLoad() {
    // 获取接口数据


  },
  onReady() {
    // DOM加载完毕后加载数据
    console.log('启动了吗')
    this.RingDom = this.selectComponent('#mychart-dom-pie');
    this.LineDom = this.selectComponent("#mychart-dom-line");

    this._getRing()
    //this.initPieChart(healthData)
    //this.initLineChart(lineDataX, lineDataY)
  },
});
